<template>
    <div class="CustomSortView">
        <div class="dataRowView">
            <div class="itemView" v-for="(item,index) in CustomSortData" :key="index">
                <span>{{ item.itemValue ?
                item.itemName + '：' + item.itemValue : item.itemName+'：-'
                }}{{item.isShowUnit?item.unitName:""}}</span>
            </div>
        </div>
        <div class="treeDataView">
            <div v-for="(item,index) in treeData" :key="index" class="treeItemView">
                <span class="titleName">{{item.itemName}}</span>
                <CustomSort :data="item.itemDTOList"></CustomSort>
            </div>
        </div>
    </div>
</template>

<script>
export default ({
    name: 'CustomSort',
    components: {},
    props: {
        data: {
            type: Array,
            default: () => [],
        },
    },
    data() {
        return {
            treeData: []
        }
    },
    mounted() { },
    methods: {},
    computed: {
        CustomSortData() {
            let data = this.data
            let datas = []
            let treeData = []
            // console.log('CustomSortData', data)
            for (let e in data) {
                if (!data[e].itemDTOList) {
                    datas.push(data[e])
                } else {
                    treeData.push(data[e])
                }
            }
            this.treeData = treeData
            return datas
        }
    },
})
</script>

<style lang="scss" scoped>
.CustomSortView {
    // margin-top: 16px;
    width: 100%;
    display: flex;
    flex-direction: column;

    .treeDataView {
        width: 100%;
        display: flex;
        flex-direction: column;

        .treeItemView {
            // margin: 8px 0px;
            margin-top: 16px;

            .titleName {
                // font-size: 20px;
                // font-family: PingFangSC-Regular, PingFang SC;
                // font-weight: 400;
                // color: #1B2E5E;
                // margin-top: 16px;
                line-height: 22px;

                font-family: PingFangSC-Regular;
                font-weight: 400;
                font-size: 16px;
                color: #1B2E5E;
                letter-spacing: 0;
                text-align: left;
            }
        }
    }

    .dataRowView {
        width: 100%;
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        // margin-top: 4px;

        .itemView {
            width: 33%;
            margin-top: 8px;

            span {
                font-size: 16px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #57759D;
                line-height: 22px;

            }
        }
    }
}
</style>